<template>
	<div class="rec-box">
		<router-link class="link" :to="'/detail?goodsId='+goods.id">
			<img :src="goods.imgPath" alt="" />
			<div class="res-right">
				<div class="rec-top">
					<h6>{{ goods.name }}</h6>
					<p>{{ goods.introduce }}</p>
				</div>
				<div class="rec-bottom">
					<p>
						￥{{ goods.price }}
						<span>已销售{{ goods.salesVolume }}件</span>
					</p>
					<button>购买</button>
				</div>
			</div>
		</router-link>
	</div>
</template>

<script>
export default {
	name: 'recommend',
	props: ['goods'],
	data() {
		return {
			/* goods: {
				id: '0001',
				name: '温柔时光',
				introduce: '11枝优质红玫瑰搭配绿叶，满天星，随机赠送2只小熊',
				price: 179.0,
				pricey: 200,
				salesVolume: 8651,
				imgPath: 'http://i.huasongwang.com/i/g/2016/06/03/05182853607536029_360.jpg',
				sort: '人气推荐'
			}, */
			
		};
	},
	methods: {}
};
</script>

<style scoped="scoped">
.link {
	color: #000000;
	text-decoration: none;
	width: 100%;
	height: 100%;
	display: flex;
	justify-content: space-around;
	align-items: center;
}
.rec-box {
	width: 100%;
	height: 3.82rem;
	border-bottom: 0.01rem solid #ddd;
}
.rec-box img {
	width: 3.1rem;
	height: 3.1rem;
}
.res-right {
	width: 3.8rem;
	height: 3.1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.rec-top,
.rec-bottom {
	width: 100%;
	height: 1rem;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.rec-top h6 {
	font-size: 0.3rem;
	font-weight: inherit;
	color: #333;
}
.rec-top p {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	color: #777;
	font-size: 0.23rem;
}

.rec-bottom {
	flex-direction: row;
	align-items: flex-end;
}
.rec-bottom p {
	height: 100%;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	color: #ff867a;
	font-size: 0.35rem;
}
.rec-bottom p span {
	color: #666666;
}
.rec-bottom button {
	width: 1.48rem;
	height: 0.58rem;
	border: #000000 solid 0.01rem;
	border-radius: 0.08rem;
	text-align: center;
	background: none;
	margin-right: 0.2rem;
}
</style>
